import React, { useState, useEffect } from 'react'
// 引入 ECharts 主模块

import * as echarts from 'echarts';
import Styles from './index.css'
const defaultOption = {
    color: ["#2f89cf"],
    tooltip: {
        trigger: "axis",
        axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: "0%",
        top: "10px",
        right: "0%",
        bottom: "4%",
        containLabel: true
    },
    xAxis: [
        {
            type: "category",
            data: [
                "旅游行业",
                "教育培训",
                "游戏行业",
                "医疗行业",
                "电商行业",
                "社交行业",
                "金融行业"
            ],
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: "12"
                }
            },
            axisLine: {
                show: false
            }
        }
    ],
    yAxis: [
        {
            type: "value",
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: "12"
                }
            },
            axisLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)"
                    // width: 1,
                    // type: "solid"
                }
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)"
                }
            }
        }
    ],
    series: [
        {
            name: "直接访问",
            type: "bar",
            barWidth: "35%",
            data: [200, 300, 300, 900, 1500, 1200, 600],
            itemStyle: {
                barBorderRadius: 5
            }
        }
    ]
};
const Index = () => {
    const [chart, setChart] = useState('')
    console.log("echarts", echarts)
    const resize = () => {
        chart && chart.resize();
    }
    useEffect(() => {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart_emp'));
        setChart(myChart)
        // 绘制图表
        myChart.setOption(defaultOption);
        window.addEventListener('resize', resize);
    }, [])
    return <>
        <div className='pane-title'>
            柱状图-就业行业 <a href="javascript:;">2019</a>
            <a href="javacript:;"> 2020</a>
        </div>
        就业
        <div className={Styles.chart} id='chart_emp' style={{ height: '100%', width: '100%' }} ></div>
    </>
}

export default Index